<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0084)http://tealapparel.com/store/skin/frontend/default/teal/epiczoom/simple-example.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Epic Image Zoom - simple example</title>
<meta name="language" content="en_EN">
<meta name="content-language" content="en_EN">
<meta name="description" content="Zoom any image with a super-simple jQuery plugin.">
<meta name="keywords" content="zoom, demo, Web factory">
<meta name="copyright" content="(c) 2011., webfactoryltd.com">
<meta name="author" content="http://www.webfactoryltd.com">
<meta name="contact" content="info@webfactoryltd.com">
<script type="text/javascript" src="./Epic Image Zoom - simple example_files/jquery.min.js"></script>
<script type="text/javascript" src="./Epic Image Zoom - simple example_files/epic-image-zoom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#image1').epicZoom({ largeImage: 'images/_demo_only/1_large.jpg', magnification: 1 });
  $('#image2').epicZoom({ magnification: 1});
});
</script>
<style type="text/css">
body {
  padding: 30px;
}
</style>
</head>

<body>

<p>Following include statements were used:<br>
<code>
 &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;<br>
 &lt;script type="text/javascript" src="js/epic-image-zoom.js"&gt;&lt;/script&gt;
</code></p>

<p>EIZ was initialized on the two images using:<br>
<code>
&lt;script type="text/javascript"&gt;<br>
$(document).ready(function(){<br>
&nbsp;&nbsp;$('#image1').epicZoom({ largeImage: 'images/1_large.jpg', magnification: 1 });<br>
&nbsp;&nbsp;$('#image2').epicZoom({ magnification: 1});<br>
});<br>
&lt;/script&gt;
</code></p>

  <p><span id="eiz-2" class="eiz-container" style="margin: 0px; padding: 0px; border: 0px;"><img src="./Epic Image Zoom - simple example_files/1_small.jpg" id="image1" alt="Pixar, Up" title="Pixar, Up"><span class="eiz-magnifier" style="position: absolute; margin: 0px; padding: 0px; border: 1px solid white; -webkit-box-shadow: rgb(119, 119, 119) 0px 0px 5px; box-shadow: rgb(119, 119, 119) 0px 0px 5px, rgb(170, 170, 170) 0px 0px 10px inset; overflow: hidden; z-index: 20; width: 150px; height: 150px; display: none; left: 234px; top: 423px;"><div style="position: absolute; margin: 0px; padding: 0px; border: 0px; z-index: 1; overflow: hidden; left: -847.6318181818183px; top: -755.709090909091px;"><img alt="" title="" style="margin: 0px; padding: 0px; border: 0px; cursor: none; width: 1498px;" src="./Epic Image Zoom - simple example_files/1_large.jpg"></div></span></span><br>
  Example with two images.</p>
  <p><span id="eiz-1" class="eiz-container" style="margin: 0px; padding: 0px; border: 0px;"><img src="./Epic Image Zoom - simple example_files/5_large.jpg" id="image2" alt="Watch" title="Watch" width="440"><span class="eiz-magnifier" style="position: absolute; margin: 0px; padding: 0px; border: 1px solid white; -webkit-box-shadow: rgb(119, 119, 119) 0px 0px 5px; box-shadow: rgb(119, 119, 119) 0px 0px 5px, rgb(170, 170, 170) 0px 0px 10px inset; overflow: hidden; z-index: 20; width: 150px; height: 150px; display: none; left: 397px; top: 642px;"><div style="position: absolute; margin: 0px; padding: 0px; border: 0px; z-index: 1; overflow: hidden; left: -1878px; top: -739.5px;"><img alt="" title="" style="margin: 0px; padding: 0px; border: 0px; cursor: none; width: 1980px;" src="./Epic Image Zoom - simple example_files/5_large.jpg"></div></span></span><br>
  Example with one, large image.</p>



</body></html>